<template>
<a-form @submit="handleSubmit" :autoFormCreate="(form)=>{this.form = form}">
<a-modal :title="'任务编辑'" 
class="standardListForm" :width="640" :bodyStyle="{ padding: '28px 0 0' }" :visible="visible" @ok="handleOk" @cancel="handleCancel">
    
        <a-form-item label="任务名称" v-bind="formLayout" 
                fieldDecoratorId="title" 
                :fieldDecoratorOptions="{
                    rules: [{ required: true, message: '请输入任务名称' }],
                    initialValue: record.title,
                }">
            <a-input placeholder="请输入" />
        </a-form-item>
        <a-form-item label="开始时间" v-bind="formLayout" fieldDecoratorId="createdAt" :fieldDecoratorOptions="{
                    rules: [{ required: true, message: '请选择开始时间' }],
                    initialValue: record.createdAt ? moment(record.createdAt) : null,
                }">
            <a-date-picker showTime placeholder="请选择" format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
        </a-form-item>
        <a-form-item label="任务负责人" v-bind="formLayout" fieldDecoratorId="owner" :fieldDecoratorOptions="{
                    rules: [{ required: true, message: '请选择任务负责人' }],
                    initialValue: record.owner,
                }">
            <a-select placeholder="请选择" style="width: 100%">
                <a-select-option value="付晓晓">付晓晓</a-select-option>
                <a-select-option value="周毛毛">周毛毛</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item v-bind="formLayout" label="产品描述" fieldDecoratorId="subDescription" :fieldDecoratorOptions="{
                    rules: [{ message: '请输入至少五个字符的产品描述！', min: 5 }],
                    initialValue: record.subDescription,
                }">
            <a-textarea :rows="4" placeholder="请输入至少五个字符" />
        </a-form-item>
    
</a-modal>
</a-form>
</template>

<script lang="ts">
import {
    Component,
    Prop,
    Vue,
    Emit,
    Watch,
} from 'vue-property-decorator';
import {
    State,
    Mutation,
    namespace,
} from 'vuex-class';

import moment from 'moment';
import axios from 'axios';

@Component({})
export default class BaseListModal extends Vue {

    @Prop({
        type: Boolean,
        default: false,
    })
    private visible!: boolean;

    @Prop({
        type: Object,
        default() {
            return {};
        },
    })
    private record!: any;

    private form: any = null;

    private moment: any = moment;

    private formLayout = {
        labelCol: {
            span: 7,
        },
        wrapperCol: {
            span: 13,
        },
    };

    private handleOk(e: any) {

        e.preventDefault();
        this.form.validateFields((err: any, fieldsValue: any) => {
            if (err) {
                return;
            }

            const id = this.record.id;

            axios.post('/api/save_fake_list', {id, ...fieldsValue})
                .then((res: any) => {
                    this.updateVisible(false);
                    this.onClose(true);
                });
            });
    }

    private handleCancel() {
        this.updateVisible(false);
        this.onClose(false);
    }

    @Emit('update:visible')
    private updateVisible(visible: boolean): void {}

    @Emit('close')
    private onClose(isOk: boolean) {

    }

    private handleSubmit() {

    }
}
</script>
